import React, { Component } from 'react';
import { View, ScrollView, Navigator } from '@tarojs/components'
import './sub-category-component.scss'
import { AtIcon } from 'taro-ui'
import PropTypes from 'prop-types'

interface PagePorps {
    data: {
        name: string
        id: number
        url: string
        urlType: number
    }[]
    onChange: {(id: number): number}
    activeId: number
}

export default class SubCategoryComponent extends Component<PagePorps> {
    static defaultProps = {
        data: [],
        onChange: () => {},
        activeId: 0,
    }
    static propTypes = {
        data: PropTypes.array,
        onChange: PropTypes.func,
        activeId: PropTypes.number,
    }
    categoryClick(id) {
        this.setState({ activeId: id },() =>{
            this.props.onChange(id)
        })
    }
    render() {
        const { data, activeId } = this.props
        if(activeId) {
            return (
                <View className='subRoot'>
                    <View className='category-wrap'>
                        <ScrollView enable-flex scrollX className='category-box'>
                            <View className='category-wrap'>
                                {data.map(item => <View key={item.id} onClick={this.categoryClick.bind(this, item.id)} className={`category-item ${activeId == item.id ? 'active' : ''}`}>{item.name}</View>)}
                            </View>
                        </ScrollView>
                        <Navigator className='search-icon-box' url='/common/search/search' hoverClass='none'>
                            <AtIcon value='search' size='18'></AtIcon>
                        </Navigator>
                    </View>
                </View>
            )
        }
    }
}
